<template>
    <div class="Super_Stock_Card">
        <h1>{{cardInfo.name}} <span class="red">{{cardInfo.increase}}</span></h1>
        <ul>
            <li>
                <p class="num">{{cardInfo.buyingPrice}}</p>
                <p class="text">买入价格</p>
            </li>
            <li>
                <p class="num">{{cardInfo.sellingPrice}}</p>
                <p class="text">卖出价格</p>
            </li>
            <li>
                <p class="num">{{cardInfo.holdingDays}}</p>
                <p class="text">持股天数</p>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'Super_Stock_Card',
    props: ['cardInfo']
}
</script>
<style scoped>
.red{
    color: #f22;
    font-size: 24px;
}
.Super_Stock_Card{
    box-sizing: border-box;
    padding: 3px;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
}
.Super_Stock_Card h1{
    line-height: 70px;
    border-bottom: 1px solid #dfdfdf;
    text-indent: 1.4em;
    font-size: 22px;
    font-weight: normal;
}
.Super_Stock_Card ul{
    list-style-type: none;
    margin-top: 10px; 
    height: 60px;
}
.Super_Stock_Card ul li{
    float: left;
    width: 33%;
    height: 50px;
}
.Super_Stock_Card ul li p{
    text-align: center;
}
.Super_Stock_Card ul li .num{
    color: #121212;
    font-size: 18px;
}
.Super_Stock_Card ul li .text{
    font-size: 13px;
}
</style>
